<template>
  <div style="display: flex; align-items: center; justify-content: center">
    <el-input-number :controls="false" v-model="model1"
                     :placeholder="placeholder" style="flex: 0.5; width: 150px"/>
    ~
    <el-input-number :controls="false" v-model="model2"
                     :placeholder="placeholder" style="flex: 0.5; width: 150px"/>
  </div>
</template>
<script setup>
import {computed, defineProps, ref, shallowRef} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {handleLikeParam, isEmpty, real} from '@/utils/CommonUtils';

const props = defineProps({
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const model1 = shallowRef();
const model2 = shallowRef();

function resetField() {
  model1.value = undefined;
  model2.value = undefined;
}

function getSearchFieldValue(searchData) {
  if(isEmpty(searchData.ge)) searchData.ge = []
  if(isEmpty(searchData.le)) searchData.le = []

  if (real(model1) !== undefined && real(model1) !== null) {
    searchData.ge.push({
      fieldName: props.field.tableFieldName,
      value: model1.value
    });
  }
  if (real(model2) !== undefined && real(model2) !== null) {
    searchData.le.push({
      fieldName: props.field.tableFieldName,
      value: model2.value
    });
  }
}

const placeholder = computed(() => {
  if (isEmpty(props.field.id)) return '';
  return `请输入${props.field.alias ? props.field.alias : props.field.showName}`;
});


defineExpose({
  getSearchFieldValue,
  resetField
});
</script>
